<template>
  <div class="app" v-if="user!=null">
    <div style="margin: 0 auto ;text-align:center">
      <h3>
        <span>{{user.userName}}</span>
      </h3>
    </div>
    <div style="font-size: 1rem;min-width: 100px;text-align: center">
      <el-row :gutter="10">
        <el-col :span="12">
          <span style="color: #F56C6C;">lv.{{user.level}}</span>
        </el-col>
        <el-col :span="12">
          <span><i class="el-icon-coin"/>{{user.balance}} </span>
        </el-col>
      </el-row>
<!--      <el-progress :percentage="50"></el-progress>-->
    </div>
    <el-divider></el-divider>
    <div style="min-width: 100px">
      <el-menu  class="el-menu-demo" mode="" @select="handleSelect">
        <el-menu-item index="1" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-user"/>
            </el-col>
            <el-col :span="18">
              <span>个人中心</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>
        <el-menu-item index="2" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-user"/>
            </el-col>
            <el-col :span="18">
              <span>个人中心</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>
        <el-menu-item index="3" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-reading"/>
            </el-col>
            <el-col :span="18">
              <span>历史记录</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>
      </el-menu>
    </div>
    <div style="min-width: 100px">
      <el-divider></el-divider>
      <el-menu  class="el-menu-demo" text-color="#F56C6C" @select="handleSelect">
        <el-menu-item index="1" >
          <el-row :gutter="10">
            <el-col :span="4">
              <i class="el-icon-switch-button"/>
            </el-col>
            <el-col :span="18">
              <span>退出登录</span>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-arrow-right"/>
            </el-col>
          </el-row>
        </el-menu-item>
      </el-menu>
    </div>

  </div>
  <div class="app" style="text-align: center" v-else>
    <el-button type="primary">Login</el-button>
    <el-divider></el-divider>
    <div style="font-size: 0.7rem">第一次使用?</div>
    <el-link type="primary" style="font-size: 0.7rem">创建一个</el-link>
  </div>
</template>

<script>
export default {
  name: "InfoComponent",
  props: {},
  data() {
    return {
    }
  }, methods: {
    handleSelect(key, keyPath) {
      console.log(key+"--->"+keyPath)
    }
  }, watch: {}, computed: {
    user(){
      return this.$store.state.user
    }
  }
}
</script>

<style scoped>
.app{
  font-family: '微软雅黑';
  margin: 0 auto ;
  width: 200px;

}
</style>